<template>
  <div class="header-detail">
    <transition name="fade">
      <!-- 详细内容（弹窗） -->
      <div class="detail" v-show="detailShow">
        <div class="detail-wrapper clearfix">
          <div class="detail-main">
            <div class="name">{{ seller.name }}</div>
            <div class="star-wrapper">
              <stars class="star" :score="seller.score" :size="48"></stars>
            </div>
            <div class="supports-list">
              <subhead class="subhead" :subhead="'优惠信息'"></subhead>
              <ul class="allSupport" v-if="seller.supports">
                <li class="support-item" v-for="(item, i) in seller.supports" :key="i">
                  <supportico :size="2" :type="i"></supportico><span class="text-detail"> {{ item.description }} </span>           
                </li>
              </ul>
            </div>
            <div class="seller-bulletin">
              <subhead class="subhead" :subhead="'商家公告'"></subhead>
              <p class="content">{{seller.bulletin}}</p>
            </div>
          </div>
        </div>
        <div class="detail-close linclass" @click="closeMoreDetail">
          <i class="icon-close"></i>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import stars from 'components/stars/stars.vue'
import subhead from './subhead.vue'
import supportico from 'components/support-ico/support-ico.vue'
export default {
  name: 'v-header-detail',
  props: {
    seller: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data () {
    return {
      detailShow: false 
    }
  },
  methods: {
    showMoreDetail() {
      this.detailShow = true
    },
    closeMoreDetail() {
      this.detailShow = false
    }
  },
  components: {
    stars,
    subhead,
    supportico
  }
}
</script>
<style lang="stylus" scoped>
@import '~common/stylus/mixin'
.header-detail
  .detail
    position fixed
    top 0
    left 0
    width 100%
    height 100%
    background-color rgba(7,17,27,0.8)
    z-index 99
    overflow auto
    .detail-wrapper
      width 100%
      min-height 100%
      color #fff
      .detail-main
        margin-top 64px
        padding-bottom 64px
        .name
          font-size 16px
          font-weight 700
          line-height 16px
          text-align center
        .star-wrapper
          width 100%
          margin-top 16px
          text-align center
        .supports-list
          .allSupport
            margin 0 36px
            .support-item
              margin-bottom 12px
              padding 0 12px
              font-size 0
              &:last-child
                margin-bottom 0
              .supports-ico
                vertical-align top
              .text-detail
                margin-left 6px
                font-size 12px
                line-height 16px
        .seller-bulletin
          .content
            padding 0 48px
            font-size 12px
            line-height 24px

    .detail-close
      position relative
      width 32px
      height 32px
      margin -64px auto 0 auto 
      clear both
      font-size 32px
      color $color-white
    &.fade-enter, &.fade-leave-to
      opacity 0
    &.fade-enter-active, &.fade-leave-active
      transition: all 0.2s ease
</style>
